<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      table{
        width: 500px;
        border-collapse: collapse;
      }
      table,th,td{
          border: 1px solid gray; 
          text-align: center;
          margin: auto;
      }
      th{
          padding: 0px 20px;
          background-color: #3898cb;
          color: white;
      }
        
    </style>
</head>
<body>
    <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
    </table>


    <script>
        //获取 全选框
        const allCheck = document.querySelector('#checkAll')
        // 获取所有 复选框 
        const cks =  document.querySelectorAll('.ck')

        // 全选复选框点击，可以得到当前按钮的checked
        allCheck.addEventListener('click',function(){
          // console.log(allCheck.checked)  // true false 两个值
            for(let i = 0;i<cks.length;i++){
              // 把下面所有的小复选框状态checked，改为和全选复选框一致
                cks[i].checked = allCheck.checked
            }
        })


        for( i = 0;i<cks.length;i++){
            cks[i].addEventListener('click',function(){
            // console.log(document.querySelectorAll('.ck:checked').length === cks.length) // true false
            //cl 为 小的复选框全选时的 true 
            const cl = document.querySelectorAll('.ck:checked').length === cks.length
            //将 true 赋值 给 大复选框 
            allCheck.checked = cl
            })
        }
    </script>
</body>
</html>